<template>
	<view>
		<view class="list" v-if="list.length">
			<view 
				class="item tp-w690"
				@click="makePhoneCall(item.phone)"
				v-for="(item,index) in list"
				:key="index"
			>
				<view class="info">
					<text class="name">{{item.name}}</text>
					<text class="phone">{{item.phone}}</text>
					<image class="phone-img tp-ml30" src="../static/imgs/icons/phone1-icon.png" mode=""></image>
				</view>
				<view class="btn" @click.stop="handleGoEmergencyContactEdit(item)">管理</view>
			</view>
		</view>
		
		<view class="no_list" v-else>
			<image :src="www + 'imgs/home/emergency-bg.png'" mode=""></image>
		</view>
		
		
		<view class="common-btn" @click="handleGoEmergencyContactEdit(null)">添加联系人</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods: {
			handleGoEmergencyContactEdit(item) {
				let url = item ? `./emergencyContactEdit?id=${item.id}&name=${item.name}&phone=${item.phone}` : './emergencyContactEdit'
				uni.navigateTo({url});
			},
			getList() {
				this.$http.get(this.$api.emergencyContactList).then(res => {
					if (res.code === 200) {
						this.list = res.data
					}
				})
			},
			// 拨打电话
			makePhoneCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.list {
	margin-bottom: 260rpx;
	.item {
		margin-top: 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.info {
			display: flex;
			align-items: center;
			.name {
				margin-right: 43rpx;
			}
		}
		.phone-img{
			width: 44rpx;
			height: 44rpx;
		}
		.btn {
			color: $yellow;
		}
	}
}

.no_list {
	width: 436rpx;
	height: 262rpx;
	margin: 220rpx auto 180rpx;
}

.common-btn {
		width: 520rpx;
		box-shadow: none;
	}
</style>
